import React, { PureComponent, Component } from 'react'
import { connect } from 'dva'
import {
  Row,
  Col,
  Input,
  Form,
  DatePicker,
  Space,
  Table,
  Button,
  Modal,
  Switch,
  message,
  TreeSelect,
  Spin,
  Select
} from 'antd';
const { Option } = Select
const { confirm } = Modal;
import { SearchOutlined, ReloadOutlined,EditOutlined ,DeleteOutlined,ExclamationCircleOutlined} from '@ant-design/icons'
import { listType,delType } from "@/api/system/dict/type.js";
import { addDateRange } from '@/utils/ruoyi.js';
import AddDict from '@/components/dict/AddDict.js'
import EditDict from '@/components/dict/EditDict.js'
import { Link } from 'umi';



class SystemPost extends PureComponent {

  formRef = React.createRef();
  state = {
    loading: true,
    //字典表格数据
    typeList:[],
    // 日期范围
    dateRange: [],
    // 查询参数
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      dictName: undefined,
      dictType: undefined,
      status: undefined
    },
    //总条数目
    total:0,
     addVisible:false,
     dictId:null,
     editVisible:false,
     record:null
  }

  componentWillMount(){
    this.getlist()
  }

  getlist=()=>{    //获取系统数据
    this.setState({
      loading:true
    })
    listType(addDateRange(this.state.queryParams,this.state.dateRange)).then(res => {
      if(res.code==200){
        this.setState({
          typeList:res.rows,
          total:res.total,
          loading:false
        })
      }
    })
  }
  //显示增加菜单弹框
  addVisible=()=>{
    this.setState({
      addVisible:true
    })
  }
  //关闭增加菜单弹框
  addonCancel=()=>{
    this.setState({
      addVisible:false
    })
  }
  //修改菜单弹框
  editMenuVisible=(status,record)=>{
    this.setState({
      dictId:record.dictId,
      editVisible:true,
      record:record
    })

  }
  editonCanCel=()=>{
    this.setState({
      editVisible:false
    })
  }

  //搜索
  onFinish=values=>{
    this.setState({
      queryParams:{
        ...this.state.queryParams,
        ...values
      }
    })

    this.getlist()
  }


    //分页页码改变回调
   paginationChange = (page, pageSize) => {
      this.setState({
        queryParams:{
          ...this.state.queryParams,
          pageNum:page,
          pageSize:pageSize
        }
      },()=>{
        this.getlist()
      })
  }

    //分页页码改变回调
    pageSizeChange = (current, size) => {
      this.setState({
        queryParams:{
          ...this.state.queryParams,
          pageNum:current,
          pageSize:size,
        }
      },()=>{
        this.getlist()
      })
    }



    //重置
  Reload = () => {
    this.formRef.current.resetFields()

    this.setState({
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictName: undefined,
        dictType: undefined,
        status: undefined
      },
    },()=>{
      this.getlist()
    })
  }




  render() {
    const {typeList,addVisible,editVisible,dictId,total}=this.state
    const that=this


    const columns = [
      { title: '字典编号', dataIndex: 'dictId',key:'dictId'},
      { title: '字典名称', dataIndex: 'dictName',key:'dictName' },
      { title: '字典类型', dataIndex: 'dictType',
      render:(status,record)=>(
        <Link to={{pathname:`/dict/type/data/${record.dictId}`,state:status}} >
          {status}
        </Link>
      )

    },
      { title: '状态', dataIndex: 'stat us',render: (status, record) => (
        <>
          {record.status=="0"?'正常':'停止'}
        </>
        ) },
        { title: '备注', dataIndex: 'remark',key:'remark' },
      { title: '创建时间', dataIndex: 'createTime',key:'createTime' },
      { title: '操作', dataIndex: 'action',
      render: (status, record) => (
        <Space size="middle">
          <a onClick={() =>that.editMenuVisible(status,record)}>
            <EditOutlined />
            修改
          </a>
          <a
            onClick={status => {
              confirm({
                title: `是否确认删除字典编号为${record.dictId}类型吗?"`,
                icon: <ExclamationCircleOutlined />,
                cancelText: '取消',
                okText: '确定',
                onOk() {
                  delType(record.dictId).then(res => {
                    if (res.code == 500) {
                      message.warning(res.msg);
                      return false;
                    } else if (res.code == 200) {
                      message.success('删除字典类型成功');
                      that.getlist()
                    }
                  });
                },
                onCancel() {
                  message.warning('取消成功');
                },
              });
            }}
          >
            <DeleteOutlined />
            删除
          </a>
        </Space>
      ),

    },

    ];

    return (
      <>
        <Row gutter={24}>
          <Col xs={24}>
            <Form
            style={{ display: 'flex' }}
            onFinish={this.onFinish}
            ref={this.formRef}
            >
              <Form.Item label="字典名称"
              style={{ marginRight: '20px' }}
              name="dictName"
              >
                <Input
                  style={{ width: '240px' }}
                  placeholder="请输入字典名称"
                />
              </Form.Item>

              <Form.Item label="字典类型"
              style={{ marginRight: '20px' }}
              name="dictType"
              >
                <Input
                  style={{ width: '240px' }}
                  placeholder="请输入字典类型"
                />
              </Form.Item>

              <Form.Item label="状态"   name="status"
              style={{ marginRight: '20px' }}>
                <Select
                placeholder='字典状态'
                style={{ width: '240px' }}
                >
                  <Option value={"0"}>正常</Option>
                  <Option value={"1"}>停用</Option>
                </Select>
              </Form.Item>
              <Button type="primary"
              style={{ marginRight: '20px' }}
               icon={<SearchOutlined />}
              htmlType="submit"
               >
                搜索
              </Button>
              <Button icon={<ReloadOutlined />} onClick={this.Reload}>
                重置
              </Button>
            </Form>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col>
            <Button type="primary" onClick={this.addVisible} >
              新增
            </Button>
          </Col>
        </Row>

          <Table
          columns={columns}
          dataSource={typeList}
          rowKey={typeList => typeList.dictId}
          defaultExpandAllRows
          pagination={{
            showQuickJumper: true,
            showSizeChanger: true,
            defaultCurrent: 1,
            onChange: this.paginationChange,
            onShowSizeChange:this.pageSizeChange,
            pageSizeOptions: [5, 8, 10],
            total: total,
          }}
          >
        </Table>


        <AddDict
          visible={addVisible}
          onCancel={this.addonCancel}
          oninitList={this.getlist}
        ></AddDict>

      {
        dictId!==null&&
        <EditDict
        visible={editVisible}
        onCancel={this.editonCanCel}
        oninitList={this.getlist}
        dictId={dictId}
        record={this.state.record}
      >
       </EditDict>
      }


      </>
    )
  }


}


export default SystemPost
